.box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    background: #464353;
}
.card-header {
    background: #464353;
    height: 2.2rem;
    box-sizing: content-box;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0rem 1.2rem;
}
.card-header .icon {
    color: white;
    font-size: 1.2rem;
    /* padding: 5px 0.8rem; */
}

.card-header .card-go-back, .card-header .header-help{
    width: 100px;
    height: 100%;
    padding-left: 0.8rem;
    display: flex;
    align-items: center;
    /* padding-right: 2rem; */
}
.header-help {
    font-size: 0.8rem;
    padding-right: 0.8rem;
    justify-content: flex-end;
}
.card-box {
    flex: 1;
    /* display: flex; */
    /* justify-content: center; */
    position: relative;
    background: #464353;
    padding-top: 30px;
    box-sizing: border-box;
    perspective: 1000px;
}
.container {
    width: 100%;
    height: 100%;
}
.card-box>div {
    width: 16.75rem;
    height: 22rem;
    position: absolute;
    left: 50%;
    border-radius: 3px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    /* align-content: center; */
}
.title-box {
    width: 100%;
    height: 2.2rem;
    background: #f4f4f4;
    display: flex;
    align-items: center;
    border-radius: 3px;
}
.title {
    font-size: 0.85rem;
    color: #333;
    margin-left: 0.5rem;
}
.qr-box {
    width: 100%;
    display: flex;
    justify-content: center;
    /* padding-top: 3rem; */
}
.qr-container {
	width: 11rem;
    height: 11rem;
    position: relative;
    overflow: hidden;
}
.card-img-box {
    position: relative;
}
.userinfo-box {
    position: absolute;
    left: 3.5rem;
    top: 0.5rem;
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
}
.userinfo-box>span:nth-of-type(1) {
    color: #158b28;
    font-size: 0.6rem;
}
.userinfo-box>span:nth-of-type(2) {
    color: white;
    font-size: 0.5rem;
    background-color: rgba(000, 000, 000, 0.1);
    border-radius: 5px;
    padding: 1px 5px 0;
    margin-top: 0.2rem;
}
.code_img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 2.5rem;
    background-color: white;
    padding: 3px;
}
.qr {
	width: 100%;
	height: 100%;
}
.code-footer {
    border-top: 1px solid #ddd;
    margin: 0 1rem;
    height: 3.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-content {
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: center;
    /* flex-wrap: wrap;
    justify-content: center;
    align-content: space-evenly; */
    flex: 1;
}
.card-content:before {
    content: "";
    display: block;
}
.card-content:after {
    content: "";
    display: block;
}
.card-img {
    width: 14.4rem;
    height: 7.35rem;
}
.card-qr-container {
	width: 7rem;
    height: 7rem;
    position: relative;
}
.card-footer {
    margin: 0 1rem;
    border-top: 1px solid #ddd;
    height: 2.7rem;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.card-footer>div {
    font-size: 0.6rem;
    color: #333;
    display: flex;
    align-items: center;
}
.card-footer>div .icon {
    font-size: 1rem;
    margin-right: 5px;
}
.card-footer>div:nth-of-type(1) .icon {
    color: #82b3e0;
    
}
.card-footer>div:nth-of-type(2) .icon {
    color: #ddc27b;
}
.card-footer>div:nth-of-type(3) .icon {
    color: #e28b8b;
}

.front {
    transform: translateX(-50%) translateY(0) translateZ(0) scale(1);
    background: white;
}
.back {
    background: #f1f1f1;
    opacity: 0.8;
    transform: translateX(-50%) translateY(-66px) translateZ(-50px) scale(0.9);
    z-index: -1;
}
.front2back {
    animation-name: front2back;
    animation-duration: 0.4s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
.back2front {
    animation-name: back2front;
    animation-duration: 0.2s;
    animation-delay: 0.2s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
@keyframes front2back {
    0% {
        transform: translateX(-50%) translateY(0) translateZ(0) scale(1);
        opacity: 1;
        background: white;
    }
    50% {
        transform: translateX(-50%) translateY(100%) translateZ(-50px) scale(1);
        opacity: 1;
        background: white;
    }
    100% {
        transform: translateX(-50%) translateY(-66px) translateZ(-50px) scale(0.9);
        opacity: 0.9;
        background: #f1f1f1;
    }
}
@keyframes back2front {
    0% {
        transform: translateX(-50%) translateY(-66px) translateZ(-50px) scale(0.9);
        opacity: 0.9;
        background: #f1f1f1;
    }
    100% {
        transform: translateX(-50%) translateY(0) translateZ(0) scale(1);
        opacity: 1;
        background: white;
    }
}